<template>

    <div class="M_category">
        <div class="view_table">
            <el-table style="width: 100%;height:90%;border-radius: 0.4rem;box-shadow: 0 0 5px rgba(0, 0, 0, .15);"
                :data="userData" stripe size="large">
                <el-table-column label="用户名" prop="username" width="200" style="padding-left: 1rem;">
                </el-table-column>
                <el-table-column label="邮箱" prop="email" width="200">
                </el-table-column>
                <el-table-column label="头像">
                <template #default="scope" width="200" >
                <img :src="scope.row.avatar" alt="没有头像" >
                </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button link type="danger" size="small" @click="deleteItem(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>




</template>

<!------------------------------>
<script setup lang="ts">

const global = getCurrentInstance()


//Flag:数据获取
let userData = ref()
async function GetData() {
    // API:数据查询
    const res = await global?.proxy?.$axios.get('/v1/getalluser')
    if (res?.data.status == 200) {
        userData.value = res.data.data
    }
}; GetData()


//Flag:删除行为
const deleteItem = (scope: any) => {
    ElMessageBox.confirm(
        '是否确认删除？',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
        }
    ).then(async () => {
        // API：删除
        const rep = await global?.proxy?.$axios.delete(`/v1/deleteuser/${scope.ID}`)
        if (rep?.data?.status == 200) {
            ElMessage.success({ message: '删除成功', center: true })
            GetData()
        }
    })

}
</script>



<style scoped lang="scss">
.btn_addcate {
    margin-bottom: 1rem;
}
</style>